import React from 'react'
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ArrowRight, Music, Sparkles, Users, Play, Star, Heart, Edit3, Award, Camera } from 'lucide-react'
import { 
  JingMaskDecoration, 
  CloudDecoration, 
  WaveDecoration, 
  PlumDecoration,
  GuochaoBorder,
  TraditionalOrnament,
  OperaContainer,
  GuochaoIcon,
  TraditionalLine,
  GuochaoGrid
} from '../components/OperaPatterns'
import { 
  OperaCharacter, 
  OperaCharacterGroup, 
  OperaDance, 
  OperaBackground,
  OperaCharacterLine 
} from '../components/OperaCharacter'

const HomePage = () => {
  const features = [
    {
      icon: Music,
      title: 'AI京歌生成',
      description: '智能融合传统京剧与现代音乐，创造独特的京歌体验',
      color: 'from-zhu-hong to-jing-gold',
      link: '/ai-jingge',
      type: 'tool'
    },
    {
      icon: Sparkles,
      title: '情景式互动',
      description: '沉浸式体验京剧文化，感受传统艺术的魅力',
      color: 'from-shi-qing to-zhu-hong',
      link: '/interactive',
      type: 'experience'
    },
    {
      icon: Users,
      title: '国潮UI社区',
      description: '与志同道合的朋友分享创作，探索国潮文化',
      color: 'from-mo-hei to-shi-qing',
      link: '/community',
      type: 'community'
    },
    {
      icon: Users,
      title: '创作者中心',
      description: '专业的创作工具和作品管理平台，支持UGC内容创作',
      color: 'from-jing-gold to-zhu-hong',
      link: '/creator',
      type: 'platform'
    },
    {
      icon: Edit3,
      title: '剧本编辑器',
      description: '可视化剧本创作工具，支持互动式京剧故事创作',
      color: 'from-shi-qing to-mo-hei',
      link: '/script-editor',
      type: 'platform'
    },
    {
      icon: Award,
      title: '认证体系',
      description: '专业创作者认证，解锁更多平台权益和创作工具',
      color: 'from-jing-gold to-shi-qing',
      link: '/certification',
      type: 'platform'
    },
    {
      icon: Camera,
      title: '剧场视野',
      description: '真实座位视角分享，解决盲选座位痛点，构建线上线下文化消费闭环',
      color: 'from-zhu-hong to-mo-hei',
      link: '/theater-vision',
      type: 'community'
    }
  ]

  const stats = [
    { number: '1000+', label: '用户创作' },
    { number: '500+', label: 'AI生成作品' },
    { number: '50+', label: '互动场景' },
    { number: '99%', label: '用户满意度' }
  ]

  return (
    <div className="min-h-screen pt-16 theme-home">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        {/* Background Effects - 首页主题色彩 */}
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-opera-red/20 rounded-full blur-3xl animate-pulse-slow"></div>
          <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-opera-red/15 rounded-full blur-3xl animate-pulse-slow animation-delay-400"></div>
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-opera-red/10 rounded-full blur-3xl animate-pulse-slow animation-delay-600"></div>
          
          {/* 传统戏曲图案装饰 */}
          <CloudDecoration />
          <WaveDecoration />
          <PlumDecoration />
          
          {/* 京剧脸谱装饰 */}
          <div className="absolute top-20 right-20">
            <JingMaskDecoration size="medium" />
          </div>
          <div className="absolute bottom-20 left-20">
            <JingMaskDecoration size="small" />
          </div>
          
          {/* 京剧人物背景动画 */}
          <OperaBackground 
            characters={['dan', 'sheng', 'jing']}
            opacity={0.15}
          />
        </div>

        <div className="relative z-10 text-center max-w-6xl mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <motion.div
              className="mb-8"
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 1, delay: 0.2 }}
            >
              <h1 className="text-8xl md:text-9xl font-bold jing-text-gradient text-shadow-xl mb-6 jing-title">
                京韵织梦
              </h1>
              <p className="text-2xl md:text-3xl text-white/90 mb-4 jing-subtitle">
                Opera Dreamweaver
              </p>
            </motion.div>
            
            <motion.p 
              className="text-lg md:text-xl text-white/80 max-w-4xl mx-auto leading-relaxed mb-8 jing-content"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              🎭 传统京剧与现代科技的完美融合，让千年文化在AI的助力下焕发新的生机
              <br />
              ✨ 探索传统艺术的无限可能，创造属于这个时代的文化传奇
            </motion.p>
            
            {/* 装饰性京剧元素 */}
            <motion.div
              className="flex justify-center items-center space-x-8 mb-8"
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <div className="jing-mask w-16 h-16 animate-float"></div>
              <div className="text-4xl animate-bounce-slow">🎵</div>
              <div className="jing-mask w-16 h-16 animate-float animation-delay-400"></div>
            </motion.div>
          </motion.div>

          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          >
            <Link
              to="/ai-jingge"
              className="jing-button flex items-center space-x-2 group"
            >
              <Play size={20} />
              <span>开始创作</span>
              <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
            </Link>
            <button className="glass-effect px-8 py-3 rounded-lg text-white hover:bg-white/20 transition-all duration-300 flex items-center space-x-2">
              <Heart size={20} />
              <span>了解更多</span>
            </button>
          </motion.div>

          {/* Stats */}
          <motion.div
            className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            {stats.map((stat, index) => (
              <motion.div
                key={index}
                className="text-center"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
              >
                <div className="text-3xl md:text-4xl font-bold jing-text-gradient mb-2">
                  {stat.number}
                </div>
                <div className="text-white/60">{stat.label}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4">
        <OperaContainer pattern="cloud" className="rounded-3xl">
          <div className="max-w-7xl mx-auto">
            <motion.div
              className="text-center mb-20"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
            >
              <motion.div
                className="mb-8"
                initial={{ scale: 0.9, opacity: 0 }}
                whileInView={{ scale: 1, opacity: 1 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <TraditionalOrnament>
                  <h2 className="text-5xl md:text-6xl font-bold jing-text-gradient mb-6 jing-title text-shadow-lg">
                    核心功能
                  </h2>
                </TraditionalOrnament>
                <TraditionalLine className="w-24 h-1 mx-auto mb-6 rounded-full" />
                
                {/* 装饰性图标和京剧人物 */}
                <div className="flex justify-center space-x-8 mb-8">
                  <GuochaoIcon icon="🎭" size="medium" />
                  <GuochaoIcon icon="🎨" size="medium" />
                  <GuochaoIcon icon="✨" size="medium" />
                </div>
                
                {/* 京剧人物装饰线条 */}
                <div className="flex justify-center mb-8">
                  <OperaCharacterLine
                    characters={['dan', 'sheng', 'jing']}
                    direction="horizontal"
                    className="justify-center"
                  />
                </div>
              </motion.div>
            <p className="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed jing-content">
              🎨 探索传统京剧与现代科技的完美结合，体验前所未有的文化创新
              <br />
              🚀 每一个功能都经过精心设计，为您带来沉浸式的文化体验
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {features.map((feature, index) => {
              const Icon = feature.icon
              return (
                <motion.div
                  key={index}
                  className="jing-card group cursor-pointer relative overflow-hidden"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  whileHover={{ y: -15, scale: 1.02 }}
                >
                  <Link to={feature.link} className="block h-full">
                    {/* 国潮装饰边框 */}
                    <GuochaoBorder className="h-full">
                      <div className="h-full">
                    {/* 装饰性背景 */}
                    <div className="absolute top-0 right-0 w-32 h-32 opacity-10">
                      <div className={`w-full h-full bg-gradient-to-br ${feature.color} rounded-full blur-2xl`}></div>
                    </div>
                    
                    {/* 图标区域 */}
                    <motion.div 
                      className={`w-20 h-20 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-300 relative z-10`}
                      whileHover={{ rotate: 5 }}
                    >
                      <Icon size={40} className="text-white" />
                    </motion.div>
                    
                    {/* 内容区域 */}
                    <div className="relative z-10">
                      <h3 className="text-2xl font-bold text-white mb-4 group-hover:text-jing-red transition-colors jing-subtitle">
                        {feature.title}
                      </h3>
                      <p className="text-white/80 mb-8 leading-relaxed text-lg jing-content">
                        {feature.description}
                      </p>
                      
                      {/* 特色标签 - 京剧色彩 */}
                      <div className="flex flex-wrap gap-2 mb-6">
                        {feature.type === 'tool' && <span className="px-3 py-1 bg-zhu-hong/20 text-zhu-hong rounded-full text-sm">🤖 AI驱动</span>}
                        {feature.type === 'experience' && <span className="px-3 py-1 bg-shi-qing/20 text-shi-qing rounded-full text-sm">🎭 沉浸体验</span>}
                        {feature.type === 'community' && <span className="px-3 py-1 bg-mo-hei/20 text-mo-hei rounded-full text-sm">👥 社区共创</span>}
                        {feature.type === 'platform' && <span className="px-3 py-1 bg-jing-gold/20 text-jing-gold rounded-full text-sm">🚀 平台化</span>}
                        {feature.title === '剧场视野' && <span className="px-3 py-1 bg-zhu-hong/20 text-zhu-hong rounded-full text-sm">🎭 真实视野</span>}
                      </div>
                      
                      <div className="flex items-center text-zhu-hong group-hover:text-jing-gold transition-colors font-semibold">
                        <span className="mr-2">立即体验</span>
                        <ArrowRight size={18} className="group-hover:translate-x-2 transition-transform duration-300" />
                      </div>
                    </div>
                    </div>
                    </GuochaoBorder>
                  </Link>
                </motion.div>
              )
            })}
          </div>
        </div>
        </OperaContainer>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            className="jing-card"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold jing-text-gradient mb-6">
              开启您的京韵之旅
            </h2>
            <p className="text-xl text-white/70 mb-8">
              加入我们，探索传统京剧与现代科技的无限可能
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                to="/ai-jingge"
                className="jing-button flex items-center justify-center space-x-2"
              >
                <Music size={20} />
                <span>立即体验AI京歌</span>
              </Link>
              <Link
                to="/community"
                className="glass-effect px-8 py-3 rounded-lg text-white hover:bg-white/20 transition-all duration-300 flex items-center justify-center space-x-2"
              >
                <Users size={20} />
                <span>加入社区</span>
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-white/10">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <div className="w-8 h-8 jing-gradient rounded-lg flex items-center justify-center">
              <span className="text-white font-bold">京</span>
            </div>
            <span className="text-xl font-bold jing-text-gradient">京韵织梦</span>
          </div>
          <p className="text-white/60">
            © 2024 京韵织梦. 传承文化，创新未来.
          </p>
        </div>
      </footer>
    </div>
  )
}

export default HomePage
